<template>
  <div class="add-tenant-container">
    <el-card class="add-tenant-card">
      <div slot="header" class="clearfix">
        <span>添加新租户</span>
      </div>
      <el-form 
        :model="tenantForm" 
        :rules="rules" 
        ref="tenantForm" 
        label-width="120px"
        class="tenant-form"
      >
        <el-form-item label="租户名称" prop="name">
          <el-input v-model="tenantForm.name" placeholder="请输入租户名称"></el-input>
        </el-form-item>
        
        <el-form-item label="充值金额" prop="contactPhone">
          <el-input v-model="tenantForm.contactPhone" placeholder="请输入充值金额"></el-input>
        </el-form-item>
        
        <el-form-item label="增加天数" prop="email">
          <el-input v-model="tenantForm.email" placeholder="请输入增加天数"></el-input>
        </el-form-item>
        
        <el-form-item label="公司地址" prop="address">
          <el-input 
            v-model="tenantForm.address" 
            type="textarea" 
            placeholder="请输入公司地址"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="备注信息" prop="remark">
          <el-input 
            v-model="tenantForm.remark" 
            type="textarea" 
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm('tenantForm')">提交</el-button>
          <el-button @click="resetForm('tenantForm')">重置</el-button>
          <el-button @click="$router.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AddTenant',
  data() {
    return {
      tenantForm: {
        name: '',
        contactPerson: '',
        contactPhone: '',
        email: '',
        address: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入租户名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        contactPerson: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 这里可以调用API保存租户信息
          this.saveTenant();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async saveTenant() {
      try {
        // 模拟API调用
        // const response = await tenantApi.createTenant(this.tenantForm);
        this.$message.success('租户添加成功');
        this.$router.push('/tenant/list');
      } catch (error) {
        this.$message.error('添加租户失败: ' + error.message);
      }
    }
  }
};
</script>

<style scoped>
.add-tenant-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 84px);
}

.add-tenant-card {
  max-width: 800px;
  margin: 0 auto;
}

.tenant-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>